<template>
   <div class="box">
      <el-select v-model="address" filterable remote @change="changeAddress" reserve-keyword placeholder="请输入地点"
         remote-show-suffix :remote-method="remoteMethod" :loading="loading" style="width: 240px">
         <el-option v-for="item in addressList" :key="item.id" :label="item.title" :value="item.id" />
      </el-select>
      <vqqmap :key="componentKey" v-model="location" @update="mapChange" :options="options"></vqqmap>
   </div>
</template>
<script setup>
import { jsonp } from "vue-jsonp";
import vqqmap from "vue-qqmap";
import { usePublicDataStore } from "@/stores";
const publicDataStore = usePublicDataStore();
const componentKey = ref(0);
let location = reactive({
   lat: "30.584066",
   lng: "104.060845",
   address: "四川省成都市武侯区交子大道88号(金融城地铁站A口步行460米)",
});
let options = reactive({
   key: publicDataStore.qqMapKey,
   width: "100%",
   showBorder: false,
   showHeader: false,
   showFooter: false,
   zoom: 18,
});
let addressList = ref([]);
const address = ref("");
const loading = ref(false);
const changeAddress = (e) => {
   let addressStr = addressList.value.find((item) => item.id == e);
   location.lng = addressStr.location.lng;
   location.lat = addressStr.location.lat;
   location.address = addressStr.address;
   componentKey.value += 1;
};
const remoteMethod = (query) => {
   if (query) {
      loading.value = true;
      let url = "https://apis.map.qq.com/ws/place/v1/suggestion/?region=成都";
      jsonp(url, {
         key: publicDataStore.qqMapKey,
         keyword: query,
         output: "jsonp",
      }).then((res) => {
         loading.value = false;
         addressList.value = res.data;
         console.log(res);
      });
   } else {
      options.value = [];
   }
};
const mapChange = (data) => {
   console.log(data);
};
</script>
<style scoped>
.box {
   padding: 20px;
}

.box .row {
   padding: 10px 0;
}
</style>
